
// comments
!function(global){
    
    var $comments = $('#comments ul');
    var $name = $('#name');
    var $comment = $('#comment');
    
    function addComment(name, comment){
	var $new = $('<li class="comment"></li>');
	$new.html(name + ':<br/>' + comment);
	$comments.append($new);
    };

    $('#comments button').click(function(){
	addComment($name.val(), $comment.val());
    });
}(this);


// moutain
function Mountain(data, color){
    this.data = data;
    this.color = color;
}

Mountain.prototype.paint = function(animator){
    var ctx = animator.ctx;
    ctx.save();
    
    var width = animator.width;
    var height = animator.height;
    var len = this.data.length;
    var unit = width / (len - 1); // n + 1 points creates n segments
    var x = 0;
    ctx.beginPath();
    ctx.moveTo(0, height); // move to the left bottom
    for(var i = 0; i < len; i++){
	ctx.lineTo(x, height - this.data[i]);
	x += unit;
    }
    ctx.lineTo(width, height); // move to the right bottom
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();

    ctx.restore();
}

Mountain.prototype.update = function(animator){
    // a moutain cannot move
}

// BackgroundSpinner

function BackgroundSpinner(bg, speed /* deg / s */){ 
    this.bg = bg;
    this.angle = 0;
    this.speed = Math.PI * speed / 180; // convert to rad / s
}

BackgroundSpinner.prototype.paint = function(animator){
    var ctx = animator.ctx;
    var width = animator.width;
    var height = animator.height;
    var angle = this.angle;
    var bg = this.bg;
    
    ctx.save();

    ctx.translate(width / 2, height); // move origin to center bottom
    ctx.rotate(angle);
    var x = - bg.width / 2;
    var y = - bg.height / 2;
    ctx.drawImage(bg, x, y);

    ctx.restore();
}

BackgroundSpinner.prototype.update = function(animator){
    this.angle += this.speed * animator.delta / 1000;
    while(this.angle > 2 * Math.PI)
	this.angle -= 2 * Math.PI;
}

// canvs utils
function circle(ctx, x, y, r){
    ctx.arc(x, y, r, 0, 2 * Math.PI, false);
}


// canvas
!function(global){
    var $cvs = $('#back');
    var cvs = $cvs.get(0);
    // fix canvs width & height defaulting to 300 * 150 issue
    var bbox = cvs.getBoundingClientRect();
    $cvs.attr('width', bbox.width);
    $cvs.attr('height', bbox.height);

    // set up vars
    var ctx = cvs.getContext('2d');
    global.ctx = ctx; // debug use
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    // save prop searching time
    var Mountain = global.Mountain;
    var BackgroundSpinner = global.BackgroundSpinner;
    var circle = global.circle;
    var Animator = global.Animator;
    var PainterGroup = global.PainterGroup;

    ctx.save();
    ctx.fillStyle = '#aaddff';
    ctx.fillRect(0, 0, width, height / 2);
    ctx.fillStyle = '#66aaff';
    ctx.fillRect(0, height / 2, width, height);
    ctx.fillStyle = '#ffbb77';
    ctx.font = '48px Arial';
    ctx.fillText('白天特效', 10, 58);
    ctx.fillText('晚上特效', 10, height / 2 + 58);
    var bgDataURL = ctx.canvas.toDataURL();
    var bg = new Image();
    bg.src = bgDataURL;
    ctx.restore();

    var bgSpinner = new BackgroundSpinner(bg, 18);
    var moutain1 = new Mountain([120, 80, 170, 140, 110], 'rgba(8, 164, 0, 0.5)');
    var moutain2 = new Mountain([100, 190, 100, 110, 120, 110, 40], 'rgba(8, 164, 0, 0.8');
    var grp = new PainterGroup();
    grp.register(bgSpinner);
    grp.register(moutain1);
    grp.register(moutain2);
    var animator = new Animator(ctx, width, height, grp);
    animator.animate();

    //debug
    global.animator = animator;
}(this);


// meter
!function(global){
    var animator = global.animator;
    var $frames = $('#frames');
    var $fps = $('#fps');
    setInterval(function(){
	$frames.html(animator.totalFrame);
	$fps.html(('' + animator.fps).slice(0, 5));
    }, 500);
}(this);
